<template>
  <div class="chart-settings-container">
    <a-form layout="vertical" :model="formState">
      <!-- 基本信息配置 -->
      <a-collapse v-model:activeKey="activeKeys" expand-icon-position="right">
        <a-collapse-panel key="1" header="基本信息">
          <a-form-item label="表格标题" name="title">
            <a-input v-model:value="formState.title" placeholder="请输入标题" />
          </a-form-item>
          
          <a-form-item label="显示边框" name="bordered">
            <a-switch v-model:checked="formState.bordered" />
          </a-form-item>
          
          <a-form-item label="分页设置" name="pagination">
            <a-radio-group v-model:value="formState.paginationType">
              <a-radio value="none">不分页</a-radio>
              <a-radio value="default">默认分页</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-collapse-panel>
        
        <!-- 列设置 -->
        <a-collapse-panel key="2" header="列设置">
          <div v-for="(column, index) in formState.columns" :key="index" class="column-setting">
            <div class="column-header">
              <span>列 {{ index + 1 }}</span>
              <a-button 
                type="text" 
                danger 
                size="small" 
                @click="removeColumn(index)"
                v-if="formState.columns.length > 1"
              >
                <template #icon><delete-outlined /></template>
              </a-button>
            </div>
            
            <a-form-item label="列标题">
              <a-input v-model:value="column.title" placeholder="列标题" />
            </a-form-item>
            
            <a-form-item label="数据字段">
              <a-input v-model:value="column.dataIndex" placeholder="数据字段" />
            </a-form-item>
          </div>
          
          <a-button type="dashed" block @click="addColumn">
            <plus-outlined /> 添加列
          </a-button>
        </a-collapse-panel>
        
        <!-- 数据设置 -->
        <a-collapse-panel key="3" header="数据设置">
          <a-form-item label="静态数据">
            <a-textarea 
              v-model:value="jsonDataString" 
              :rows="8" 
              placeholder="请输入JSON格式的数据"
              @change="handleDataChange"
            />
          </a-form-item>
          
          <div v-if="dataError" class="data-error">
            {{ dataError }}
          </div>
        </a-collapse-panel>
        
        <!-- 样式设置 -->
        <a-collapse-panel key="4" header="样式设置">
          <a-form-item label="表头背景色">
            <color-picker v-model:value="formState.headerBackground" />
          </a-form-item>
          
          <a-form-item label="表头文字颜色">
            <color-picker v-model:value="formState.headerTextColor" />
          </a-form-item>
          
          <a-form-item label="表头字体大小">
            <a-slider v-model:value="formState.headerFontSize" :min="12" :max="20" />
            <div class="size-display">{{ formState.headerFontSize }}px</div>
          </a-form-item>
          
          <a-form-item label="行背景色">
            <color-picker v-model:value="formState.rowBackground" />
          </a-form-item>
          
          <a-form-item label="行文字颜色">
            <color-picker v-model:value="formState.rowTextColor" />
          </a-form-item>
          
          <a-form-item label="内容字体大小">
            <a-slider v-model:value="formState.fontSize" :min="12" :max="18" />
            <div class="size-display">{{ formState.fontSize }}px</div>
          </a-form-item>
        </a-collapse-panel>
      </a-collapse>
      
      <div class="settings-footer">
        <a-button type="primary" @click="saveSettings">保存设置</a-button>
      </div>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, defineProps, defineEmits } from 'vue';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
import ColorPicker from '../common/ColorPicker.vue';

interface Column {
  title: string;
  dataIndex: string;
  key: string;
}

interface TableFormState {
  title: string;
  columns: Column[];
  dataSource: Record<string, any>[];
  bordered: boolean;
  paginationType: 'none' | 'default';
  headerBackground: string;
  headerTextColor: string;
  headerFontSize: number;
  rowBackground: string;
  rowTextColor: string;
  fontSize: number;
}

const props = defineProps({
  chartType: {
    type: String,
    required: true
  },
  chartId: {
    type: String,
    required: true
  },
  chartOptions: {
    type: Object,
    default: () => ({})
  }
});

const emit = defineEmits(['save']);
const activeKeys = ref(['1']);
const dataError = ref('');

// 表单状态
const formState = reactive<TableFormState>({
  title: '表格',
  columns: [
    { title: '列1', dataIndex: 'col1', key: 'col1' },
    { title: '列2', dataIndex: 'col2', key: 'col2' },
    { title: '列3', dataIndex: 'col3', key: 'col3' }
  ],
  dataSource: [
    { key: '1', col1: '数据1-1', col2: '数据1-2', col3: '数据1-3' },
    { key: '2', col1: '数据2-1', col2: '数据2-2', col3: '数据2-3' },
    { key: '3', col1: '数据3-1', col2: '数据3-2', col3: '数据3-3' }
  ],
  bordered: true,
  paginationType: 'none',
  headerBackground: '#fafafa',
  headerTextColor: '#262626',
  rowBackground: '#ffffff',
  rowTextColor: '#262626',
  fontSize: 14,
  headerFontSize: 14
});

// JSON数据转换
const jsonDataString = ref('');

// 处理数据修改
const handleDataChange = () => {
  try {
    const data = JSON.parse(jsonDataString.value);
    if (!Array.isArray(data)) {
      dataError.value = '数据必须是数组格式';
      return;
    }
    
    formState.dataSource = data;
    dataError.value = '';
  } catch (error) {
    dataError.value = '数据格式错误，请检查JSON格式';
  }
};

// 添加列
const addColumn = () => {
  const newColumnIndex = formState.columns.length + 1;
  formState.columns.push({
    title: `列${newColumnIndex}`,
    dataIndex: `col${newColumnIndex}`,
    key: `col${newColumnIndex}`
  });
};

// 删除列
const removeColumn = (index: number) => {
  formState.columns.splice(index, 1);
};

// 初始化表单数据
const initFormData = () => {
  if (props.chartOptions) {
    // 合并现有配置
    if (props.chartOptions.title) {
      formState.title = props.chartOptions.title;
    }
    
    if (props.chartOptions.columns) {
      formState.columns = [...props.chartOptions.columns];
    }
    
    if (props.chartOptions.dataSource) {
      formState.dataSource = [...props.chartOptions.dataSource];
      // 更新JSON字符串
      jsonDataString.value = JSON.stringify(formState.dataSource, null, 2);
    }
    
    if (props.chartOptions.bordered !== undefined) {
      formState.bordered = props.chartOptions.bordered;
    }
    
    formState.paginationType = props.chartOptions.pagination ? 'default' : 'none';
    
    // 样式配置
    if (props.chartOptions.headerBackground) {
      formState.headerBackground = props.chartOptions.headerBackground;
    }
    
    if (props.chartOptions.headerTextColor) {
      formState.headerTextColor = props.chartOptions.headerTextColor;
    }
    
    if (props.chartOptions.headerFontSize) {
      formState.headerFontSize = props.chartOptions.headerFontSize;
    }
    
    if (props.chartOptions.rowBackground) {
      formState.rowBackground = props.chartOptions.rowBackground;
    }
    
    if (props.chartOptions.rowTextColor) {
      formState.rowTextColor = props.chartOptions.rowTextColor;
    }
    
    if (props.chartOptions.fontSize) {
      formState.fontSize = props.chartOptions.fontSize;
    }
  }
  
  // 初始化JSON字符串
  if (!jsonDataString.value) {
    jsonDataString.value = JSON.stringify(formState.dataSource, null, 2);
  }
};

// 保存设置
const saveSettings = () => {
  // 构建分页配置
  const pagination = formState.paginationType === 'none' ? false : {
    pageSize: 10,
    showSizeChanger: true,
    showQuickJumper: true
  };
  
  const options = {
    title: formState.title,
    columns: formState.columns,
    dataSource: formState.dataSource,
    bordered: formState.bordered,
    pagination,
    headerBackground: formState.headerBackground,
    headerTextColor: formState.headerTextColor,
    headerFontSize: formState.headerFontSize,
    rowBackground: formState.rowBackground,
    rowTextColor: formState.rowTextColor,
    fontSize: formState.fontSize
  };
  
  emit('save', {
    chartId: props.chartId,
    options
  });
};

// 监听配置变化
watch(() => props.chartOptions, () => {
  initFormData();
}, { deep: true, immediate: true });
</script>

<style scoped>
.chart-settings-container {
  padding: 0 10px;
}

.settings-footer {
  padding: 10px 0;
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.size-display {
  text-align: right;
  color: #999;
  margin-top: -10px;
}

.column-setting {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.column-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-weight: 500;
}

.data-error {
  color: #ff4d4f;
  margin-top: -10px;
  margin-bottom: 10px;
}

:deep(.ant-collapse-header) {
  font-weight: 500;
}

:deep(.ant-form-item) {
  margin-bottom: 14px;
}
</style> 